import React, { useState, useEffect, useRef, createContext, useContext } from 'react'
import Image2DRenderProxy from '@/ImgView/Image2DRenderProxy';
import Image2D from './Image2D';
import '@/index.css';

export const ImgView = (props) => {
  const editor = useContext(window.EditorContext)
  const renderProxy = useContext(window.RenderProxyContext)
  const wrap = useRef()
  const proxy = useRef()
  console.log(renderProxy, "ImgView=========》props");
  useEffect(() => {
    // console.log(renderProxy, "ImgView=========》props");
    if (proxy.current) {
      renderProxy.attach(proxy.current)
    }
  }, [proxy.current])
  // useEffect(() => {
  //   if (wrap.current) {
  //     wrap.current.addEventListener('scroll', () => {
  //       renderProxy.render();
  //     })
  //   }
  // }, [wrap.current])
  return (
    <div className='view-2d'>
      <div className='view-2d-proxy' ref={proxy}></div>
      {
        props.state.imgViews && <div className='view-2d-wrap' ref={wrap}>
          {props.state.imgViews.map((item, index) => (
            <Image2D key={item.id} imgIndex={index} {...props} />
          ))}
        </div>
      }
    </div>
  )
}
